<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Ebro Admin Template v1.3</title>
		
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		
	<!-- bootstrap framework-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- todc-bootstrap -->
		<link rel="stylesheet" href="css/todc-bootstrap.min.css">
	<!-- font awesome -->        
		<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
	<!-- flag icon set -->        
		<link rel="stylesheet" href="img/flags/flags.css">
	<!-- retina ready -->
		<link rel="stylesheet" href="css/retina.css">
	<!-- bootstrap switch -->
		<link rel="stylesheet" href="js/lib/bootstrap-switch/stylesheets/bootstrap-switch.css">
		<link rel="stylesheet" href="js/lib/bootstrap-switch/stylesheets/ebro_bootstrapSwitch.css">

	<!-- ebro styles -->
		<link rel="stylesheet" href="css/style.css">
	<!-- ebro theme -->
		<link rel="stylesheet" href="css/theme/color_1.css" id="theme">
		
	<!--[if lt IE 9]>
		<link rel="stylesheet" href="css/ie.css">
		<script src="js/ie/html5shiv.js"></script>
		<script src="js/ie/respond.min.js"></script>
		<script src="js/ie/excanvas.min.js"></script>
	<![endif]-->

	<!-- custom fonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
			
	</head>
	<body class=" sidebar_hidden side_fixed">
		<div id="wrapper_all">
			<header id="top_header">
				<div class="container">
					<div class="row">
						<div class="col-xs-6 col-sm-2">
							<a href="dashboard1.html" class="logo_main" title="Ebro Admin Template:"><img src="img/logo_main.png" alt=""></a>
						</div>
						<div class="col-sm-push-4 col-sm-3 text-right hidden-xs">
							<div class="notification_dropdown dropdown">
								<a href="#" class="notification_icon dropdown-toggle" data-toggle="dropdown">
									<span class="label label-danger">8</span>
									<i class="icon-comment-alt icon-2x"></i>
								</a>
								<ul class="dropdown-menu">
									<li>
										<div class="dropdown_heading">Comments</div>
										<div class="dropdown_content">
											<ul class="dropdown_items">
												<li>
													<h3><span class="small_info">12:43</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
												<li>
													<h3><span class="small_info">Today</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
												<li>
													<h3><span class="small_info">14 Aug</span><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet&hellip;</p>
												</li>
											</ul>
										</div>
										<div class="dropdown_footer"><a href="#" class="btn btn-sm btn-default">Show all</a></div>
									</li>
								</ul>
							</div>
							<div class="notification_separator"></div>
							<div class="notification_dropdown dropdown">
								<a href="#" class="notification_icon dropdown-toggle" data-toggle="dropdown">
									<span class="label label-danger">12</span>
									<i class="icon-envelope-alt icon-2x"></i>
								</a>
								<ul class="dropdown-menu dropdown-menu-wide">
									<li>
										<div class="dropdown_heading">Messages</div>
										<div class="dropdown_content">
											<ul class="dropdown_items">
												<li>
													<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
													<i class="icon-exclamation-sign indicator"></i>
												</li>
												<li>
													<h3><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aliquam assumenda&hellip;</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
												</li>
												<li>
													<h3><a href="#">Lorem ipsum dolor&hellip;</a></h3>
													<p>Lorem ipsum dolor sit amet, consectetur&hellip;</p>
													<p class="large_info">Sean Walter, 24.05.2014</p>
													<i class="icon-exclamation-sign indicator"></i>
												</li>
											</ul>
										</div>
										<div class="dropdown_footer">
											<a href="#" class="btn btn-sm btn-default">Show all</a>
											<div class="pull-right dropdown_actions">
												<a href="#"><i class="icon-refresh"></i></a>
												<a href="#"><i class="icon-cog"></i></a>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-xs-6 col-sm-push-4 col-sm-3">
							<div class="pull-right dropdown">
								<a href="#" class="user_info dropdown-toggle" title="Jonathan Hay" data-toggle="dropdown">
									<img src="img/user_avatar.png" alt="">
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="user_profile.html">Profile</a></li>
									<li><a href="javascript:void(0)">Another action</a></li>
									<li><a href="login_page.html">Log Out</a></li>
								</ul>
							</div>
						</div>
						<div class="col-xs-12 col-sm-pull-6 col-sm-4">
							<form class="main_search">
								<input type="text" id="search_query" name="search_query" class="typeahead form-control">
								<button type="submit" class="btn btn-primary btn-xs"><i class="icon-search icon-white"></i></button>
							</form> 
						</div>
					</div>
				</div>
			</header>						
			<nav id="top_navigation">
				<div class="container">
					<ul id="icon_nav_h" class="top_ico_nav clearfix">
						<li>
							<a href="#">
								<i class="icon-home icon-2x"></i>
								<span class="menu_label">Home</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-edit icon-2x"></i>
								<span class="menu_label">Content</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-group icon-2x"></i>
								<span class="menu_label">Users</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<span class="label label-danger">12</span>
								<i class="icon-tasks icon-2x"></i>
								<span class="menu_label">Tasks</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-beaker icon-2x"></i>
								<span class="menu_label">Plugins</span>
							</a>
						</li>
						<li class="active">             
							<a href="#">
								<i class="icon-book icon-2x"></i>
								<span class="menu_label">Help</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<span class="label label-success">$2 347</span>
								<i class="icon-tags icon-2x"></i>
								<span class="menu_label">E-Commerce</span>
							</a>
						</li>
						<li>             
							<a href="#">
								<i class="icon-wrench icon-2x"></i>
								<span class="menu_label">Settings</span>
							</a>
						</li>
					</ul>
				</div>
			</nav>
			<!-- mobile navigation -->
			<nav id="mobile_navigation"></nav>
			
			<section id="breadcrumbs">
				<div class="container">
					<ul>
						<li><a href="#">Ebro Admin</a></li>
						<li><a href="#">Other Pages</a></li>
						<li><span>Chat</span></li>						
					</ul>
				</div>
			</section>
			<section class="container clearfix main_section">
				<div id="main_content_outer" class="clearfix">
					<div id="main_content">
						
						<!-- main content -->
						<div class="chat_app">
							<div class="row">
								<div class="col-sm-8 col-md-9">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h4 class="panel-title pull-left">Chatroom</h4>
											<div class="btn-group btn-group-sm pull-right">
												<button class="btn btn-default" type="button" data-toggle="tooltip" data-container="body" data-title="New Chat"><span class="icon-comments"></span></button>
												<button class="btn btn-default" type="button" data-toggle="tooltip" data-container="body" data-title="Settings"><span class="icon-cog"></span></button>
												<button class="btn btn-default" type="button" data-toggle="tooltip" data-container="body" data-title="Close Chat"><span class="icon-remove"></span></button>
											</div>
										</div>
										<div class="chat_messages">
																						<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_17.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Ullam rerum alias aut architecto inventore accusantium sed necessitatibus. Rem quia dicta sit totam quia ad. Ut voluptas voluptas doloremque accusamus perferendis. Rerum maxime veritatis nihil sed.</p>
													<p class="chat_message_date">18:38:45, 21.09.96</p>
												</div>
											</div>
											<div class="chat_message">
												<img alt="" src="img/avatars/avatar_6.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Eaque sit molestiae aut cupiditate. Quasi non sunt est laborum neque porro. Optio sint ea et dolorem itaque.</p>
													<p class="chat_message_date">04:36:32, 17.07.10</p>
												</div>
											</div>
											<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_14.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Hic distinctio voluptatibus nesciunt rem. Eum quo facilis mollitia tempore in. Numquam quia perspiciatis inventore voluptatibus assumenda beatae.</p>
													<p class="chat_message_date">05:26:53, 01.09.76</p>
												</div>
											</div>
											<div class="chat_message">
												<img alt="" src="img/avatars/avatar_3.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Sed sequi alias dolores quisquam inventore autem ducimus. Provident veritatis officia magni tempore voluptatibus. Natus autem quibusdam autem mollitia.</p>
													<p class="chat_message_date">13:59:56, 30.12.09</p>
												</div>
											</div>
											<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_15.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Nisi facere rem aliquid consectetur. Aut occaecati eum ut ullam aliquam. Quo qui aut quos.</p>
													<p class="chat_message_date">08:46:58, 10.07.04</p>
												</div>
											</div>
											<div class="chat_message">
												<img alt="" src="img/avatars/avatar_9.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Nobis tempore dolore eum illo sit. Saepe hic expedita commodi voluptatem laudantium illum optio. Adipisci adipisci quis ut sapiente quam id ea doloremque.</p>
													<p class="chat_message_date">06:13:36, 05.02.11</p>
												</div>
											</div>
											<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_12.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Id aspernatur repellat sapiente possimus aspernatur in architecto veritatis. Praesentium omnis doloremque corporis error optio. Qui accusamus possimus dolorem quis necessitatibus.</p>
													<p class="chat_message_date">04:37:59, 12.06.78</p>
												</div>
											</div>
											<div class="chat_message">
												<img alt="" src="img/avatars/avatar_8.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Quo similique molestiae vel quidem nemo rem. Qui omnis in sit eligendi quos veritatis minus. Aut est voluptatem iusto sit qui voluptatem. Aut quis voluptatem suscipit itaque.</p>
													<p class="chat_message_date">08:35:17, 20.01.98</p>
												</div>
											</div>
											<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_18.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Sapiente nesciunt repellat explicabo. Quo unde similique alias velit praesentium ab enim ab. Animi est omnis consectetur distinctio unde. Cumque nobis ut neque sint.</p>
													<p class="chat_message_date">12:38:51, 27.01.76</p>
												</div>
											</div>
											<div class="chat_message">
												<img alt="" src="img/avatars/avatar_1.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Rerum sunt voluptatum non sunt sed aut deleniti. Non expedita quia veritatis repellat voluptate et. Et beatae ut eveniet tempora.</p>
													<p class="chat_message_date">22:45:58, 05.08.73</p>
												</div>
											</div>
											<div class="chat_message ch_right">
												<img alt="" src="img/avatars/avatar_15.jpg" class="img-thumbnail">
												<div class="chat_message_body">
													<p>Consequatur accusantium et dolor molestiae. Quo voluptatibus quia nulla neque omnis sed ut. Aut aut mollitia qui et et. Facere neque earum aperiam qui ipsam. Illum aperiam nihil sint quis deleniti porro.</p>
													<p class="chat_message_date">21:12:12, 27.01.07</p>
												</div>
											</div>
										</div>
										<div class="panel-footer">
											<div class="chat_submit">
												<div class="input-group">
													<input type="text" class="form-control input-lg" placeholder="Add a message...">
													<span class="input-group-btn">
														<button class="btn btn-primary btn-lg" type="button"><span class="icon-comments"></span></button>
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4 col-md-3 chat_users">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h4 class="panel-title pull-left">Contacts (12)</h4>
											<button class="btn btn-default btn-sm pull-right" type="button"><span class="icon-refresh"></span></button>
										</div>
										<table class="table table-striped">
											<tbody>
																								<tr>
													<td>
														<a href="#">
															<span class="stat stat_offline"></span>
															Dr. Waldo Metz MD															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Ignacio Crona III															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Nova Moore															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_offline"></span>
															Emily Lakin															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_offline"></span>
															Jayson Mayer IV															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_offline"></span>
															Conor Rath															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Daron Marvin															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Rory Rau															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Dr. Dedric McLaughlin DVM															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Cory Hammes															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_offline"></span>
															Murphy Kirlin															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_busy"></span>
															Russel Strosin															
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">
															<span class="stat stat_online"></span>
															Jacinthe Flatley V															
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</section>
			<div id="footer_space"></div>
		</div>
	
        <footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        &copy; 2013 Your Company
                    </div>
                    <div class="col-sm-8">
                        <ul>
                            <li><a href="#">Dashboard</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Terms of Service</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-1 text-right">
                        <small class="text-muted">v1.3</small>
                    </div>
                </div>
            </div>
        </footer>
        	
		<nav id="side_fixed_nav">
			<div class="slim_scroll">
				<div class="side_nav_actions">
					<a href="javascript:void(0)" id="side_fixed_nav_toggle"><span class="icon-align-justify"></span></a>
					<div id="toogle_nav_visible" class="make-switch switch-mini" data-on="success" data-on-label="<i class='icon-lock'></i>" data-off-label="<i class='icon-unlock-alt'></i>">
						<input id="nav_visible_input" type="checkbox">
					</div>
				</div>
				<ul id="text_nav_side_fixed">
					<li>
						<a href="javascript:void(0)"><span class="icon-dashboard"></span>Dashboard</a>
						<ul>
							<li><a href="dashboard.html">Dashboard</a></li>
							<li><a href="dashboard_drag_drop.html">Drag & Drop Dashboard</a></li>
							<li>
								<a href="javascript:void(0)">Navigations</a>
								<ul>
									<li><a href="nav_side_accordion.html">Accordion Navigation</a></li>
									<li><a href="nav_side_icons.html">Icon Navigation</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-th-list"></span>Forms</a>
						<ul>
							<li><a href="form_regular_elements.html">Regular elements</a></li>
							<li><a href="form_extended_elements.html">Extended elements</a></li>
							<li><a href="form_multiupload.html">Multiupload</a></li>
							<li><a href="form_validation.html">Form validation</a></li>
							<li><a href="wizard.html">Wizard</a></li>
							<li><a href="wysiwg.html">WYSIWG Editor</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-puzzle-piece"></span>Components</a>
						<ul>
							<li><a href="calendar.html">Calendar</a></li>
							<li><a href="charts.html">Charts</a></li>
							<li><a href="contact_list.html">Contact List</a></li>
							<li><a href="editable_elements.html">Editable Elements</a></li>
							<li><a href="file_manager.html">File manager</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li><a href="gmaps.html">Google Maps</a></li>
							<li>
								<a href="javascript:void(0)">Tables</a>
								<ul>
									<li><a href="datatables.html">Datatables</a></li>
									<li><a href="regular_tables.html">Regular</a></li>
									<li><a href="slick_grid.html">Slick Grid</a></li>
									<li><a href="table_responsive.html">Responsive Table</a></li>
								</ul>
							</li>
							<li><a href="tree_plugin.html">Tree Plugin</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-beaker"></span>UI Elements</a>
						<ul>
							<li><a href="alerts_buttons.html">Alerts, Buttons</a></li>
							<li><a href="grid.html">Grid</a></li>
							<li><a href="icons.html">Icons</a></li>
							<li><a href="notifications.html">Notifications</a></li>
							<li><a href="panels.html">Panels</a></li>
							<li><a href="tabs_accordions.html">Tabs, Accordions</a></li>
							<li><a href="tooltips_popovers.html">Tooltips, Popovers</a></li>
							<li><a href="typography.html">Typography</a></li>
						</ul>
					</li>
					<li>
						<a href="javascript:void(0)"><span class="icon-leaf"></span>Other Pages</a>
						<ul>
							<li><a href="blank.html">Blank page</a></li>
							<li class="link_active"><a href="chat.html">Chat</a></li>
							<li><a href="contact_page.html">Contact Page</a></li>
							<li><a href="error_404.html">Error 404</a></li>
							<li><a href="help_faq.html">Help/Faq</a></li>
							<li><a href="invoices.html">Invoices</a></li>
							<li><a href="landing_page.html">Landing Page</a></li>
							<li><a href="login_page.html">Login Page</a></li>
							<li><a href="mailbox.html">Mailbox</a></li>
							<li><a href="pricing_table.html">Pricing Table</a></li>
							<li><a href="search_page.html">Search Page</a></li>
							<li><a href="settings.html">Site Settings</a></li>
							<li><a href="user_profile.html">User profile</a></li>
						</ul>
					</li>				
				</ul>
			</div>
		</nav>

	<!--[[ common plugins ]]-->
	
	<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
	<!-- bootstrap framework -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	<!-- jQuery resize event -->
		<script src="js/jquery.ba-resize.min.js"></script>
	<!-- jquery cookie -->
		<script src="js/jquery_cookie.min.js"></script>
	<!-- retina ready -->
		<script src="js/retina.min.js"></script>
	<!-- typeahead -->
		<script src="js/lib/typeahead.js/typeahead.min.js"></script>
		<script src="js/lib/typeahead.js/hogan-2.0.0.js"></script>

	<!-- tinyNav -->
		<script src="js/tinynav.js"></script>
	<!-- slimscroll -->
		<script src="js/lib/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
	
	<!-- bootstrap switch -->
		<script src="js/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
	
	<!-- touchSwipe -->
		<script src="js/lib/TouchSwipe/jquery.touchSwipe.min.js"></script>
		
	<!-- Navgoco -->
		<script src="js/lib/navgoco/jquery.navgoco.min.js"></script>
		
	<!-- ebro common scripts/functions -->
		<script src="js/ebro_common.js"></script>

	<!--[if lte IE 9]>
		<script src="js/ie/jquery.placeholder.js"></script>
		<script>
			$(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->
	
    <!-- style switcher -->
		<div id="style_switcher" class="switcher_open">
            <a href="#" class="switcher_toggle"><i class="icon-cog"></i></a>
			<div class="style_items">
				<p class="style_title">Theme</p>
				<ul class="clearfix" id="theme_switch">
					<li class="style_active" style="background:#48ac2e" title="color_1">Color 1</li>
					<li style="background:#993399" title="color_2">Color 2</li>
					<li style="background:#168cbe" title="color_3">Color 3</li>
					<li style="background:#d61110" title="color_4">Color 4</li>
					<li style="background:#e96710" title="color_5">Color 5</li>
					<li style="background:#262626" title="color_6">Color 6</li>
					<li style="background:#01aaad" title="color_7">Color 7</li>
					<li style="background:#9c5100" title="color_8">Color 8</li>
					<li style="background:#e31a8f" title="color_9">Color 9</li>
					<li style="background:#ffbb0e" title="color_10">Color 10</li>
					<li style="background:#79be0b" title="color_11">Color 11</li>
					<li style="background:#887171" title="color_12">Color 12</li>
					<li style="background:#28abe2" title="color_13">Color 13</li>
					<li style="background:#2f7138" title="color_14">Color 14</li>
					<li style="background:#ce4627" title="color_15">Color 15</li>
					<li style="background:#693986" title="color_16">Color 16</li>
					<li style="background:#7f8c8d" title="color_17">Color 17</li>
					<li style="background:#2c3e50" title="color_18">Color 18</li>
					<li style="background:#34495e" title="color_19">Color 19</li>
					<li style="background:#1abc9c" title="color_20">Color 20</li>
				</ul>
			</div>
			<div class="style_items" id="sidebar_switch">
				<p class="style_title">Sidebar position</p>
				<label class="radio-inline">
					<input type="radio" name="sidebar_position" id="sidebar_left" value="left" checked> Left
				</label>
				<label class="radio-inline">
					<input type="radio" name="sidebar_position" id="sidebar_right" value="right"> Right
				</label>
			</div>
			<div class="style_items" id="layout_switch">
				<p class="style_title">Layout</p>
				<select name="layout_style" id="layout_style" class="form-control">
					<option value="fixed">Fixed</option>
					<option value="full_width" class="hidden-sm hidden-md">Full Width</option>
					<option value="boxed" class="hidden-sm hidden-md">Boxed</option>
				</select>
			</div>
			<div class="style_items" id="style_pattern">
				<p class="style_title">Pattern (boxed layout)</p>
				<ul class="clearfix">
					<li class="pattern_active" style="background:url(img/patterns/pattern_1.png) no-repeat 0 0" title="pattern_1">Pattern 1</li>
					<li style="background:url(img/patterns/pattern_2.png) no-repeat 0 0" title="pattern_2">Pattern 2</li>
					<li style="background:url(img/patterns/pattern_3.png) no-repeat 0 0" title="pattern_3">Pattern 3</li>
					<li style="background:url(img/patterns/pattern_4.png) no-repeat 0 0" title="pattern_4">Pattern 4</li>
					<li style="background:url(img/patterns/pattern_5.png) no-repeat 0 0" title="pattern_5">Pattern 5</li>
					<li style="background:url(img/patterns/pattern_6.png) no-repeat 0 0" title="pattern_6">Pattern 6</li>
					<li style="background:url(img/patterns/pattern_7.png) no-repeat 0 0" title="pattern_7">Pattern 7</li>
					<li style="background:url(img/patterns/pattern_8.png) no-repeat 0 0" title="pattern_8">Pattern 8</li>
					<li style="background:url(img/patterns/pattern_9.png) no-repeat 0 0" title="pattern_9">Pattern 9</li>
					<li style="background:url(img/patterns/pattern_10.png) no-repeat 0 0" title="pattern_10">Pattern 10</li>
				</ul>
			</div>
			<div class="text-center">
				<button class="btn btn-default" id="style_reset">Reset</button>
			</div>
        </div>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-44288135-1']);
			_gaq.push(['_trackPageview']);
		  
			(function() {
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</body>
</html>